<template>
  <div>
    <!-- 顶部 -->
    <nav-top class="navtop"
      >分类
      <template v-slot:gender>
        <div class="middle" v-show="!$route.meta.gender">
          <button
            :class="{ active: $store.state.ismale == 'male' }"
            @click="active('male')"
          >
            男生
          </button>
          <button
            :class="{ active: $store.state.ismale == 'female' }"
            @click="active('female')"
          >
            女生
          </button>
        </div>
      </template>
    </nav-top>
    <!-- 列表 -->
    <div class="list">
      <div
        class="item"
        v-for="(item, index) in list[gender]"
        :key="index"
        @click.stop="toRouter('/category/list', { tit: item.major })"
      >
        <div class="tit">
          <span
            >{{ item.major }} <i>共{{ item.bookCount }}本作品</i></span
          ><span class="iconfont icon-arrow-right-"></span>
        </div>
        <div class="content">
          <li
            v-for="(k, i) in item.mins"
            :key="i"
            @click.stop="
              toRouter('/category/list', { tit: item.major, minor: k })
            "
          >
            {{ k }}
          </li>
        </div>
      </div>
    </div>

    <van-overlay :show="overlay">
      <div class="wrapper">
        <van-loading type="spinner" color="#1989fa" />
      </div>
    </van-overlay>
  </div>
</template>

<script>
import { getAllcategory, getScategory } from "../api/category/all.js";
export default {
  data() {
    return {
      list: [],
      overlay: true, // 遮罩层 加载
    };
  },
  methods: {
    active(flag) {
      this.$store.commit("setIsmale", flag);
    },
    toRouter(path, params) {
      this.$router.push({
        path: `${path}`,
        query: { ...params },
      });
    },
    getData() {
      getScategory()
        .then((data) => {
          return data;
        })
        .then((data) => {
          getAllcategory().then((options) => {
            if (options.ok) {
              // console.log(data);
              // console.log(options);
              let da = data;

              da.female.forEach((item, index) => {
                item.bookCount = options.female[index].bookCount;
              });
              da.male.forEach((item, index) => {
                item.bookCount = options.male[index].bookCount;
              });
              this.list = da;
              console.log("分类获取数据成功");
              this.overlay = false;
            }
          });
        });
    },
  },
  created() {
    this.getData();
  },
  computed: {
    gender() {
      return this.$store.state.ismale;
    },
  },
};
</script>
<style lang="less" scoped>
.navtop{
  background-color: white;
  border-bottom: 1px solid #eee;
}
.list {
  background-color: white;
  padding: 0 0.46875rem;
  & > .item {
    .tit {
      width: 100%;
      height: 1.09375rem;
      line-height: 1.09375rem;
      border-bottom: 1px solid #b7aeae3b;
      span {
        float: left;
        vertical-align: middle;
        font-size: 0.390625rem;
        font-weight: 500;
        i {
          margin-left: 0.3125rem;
          font-weight: normal;
          font-size: 0.390625rem;
          color: #969ba3;
          font-style: normal;
        }
        &:nth-child(2) {
          float: right;
          font-weight: normal;
          color: #969ba3;
        }
      }
    }
    .content {
      display: flex;
      flex-wrap: wrap;
      padding-top: 0.3125rem;
      li {
        font-size: 0.34375rem;
        color: #969ba3;
        height: 0.453125rem;
        padding: 0.109375rem 0.234375rem;
        border: 1px solid #969ba3;
        border-radius: 0.453125rem;
        margin: 0 0.4985rem 0.3125rem 0;
        &:nth-child(4n) {
          margin-right: 0;
        }
      }
    }
  }
}
</style>